function MrCodeArea(tArea){
    var that = this;
    var $textArea = $(tArea);
    var displayValue = $textArea.getStyle('display');
    if (displayValue == 'inline') displayValue = 'inline-block';
    
    //lest replace the textArea with a div
    var $codeArea = new Element('div').wraps($textArea);
    $codeArea.setStyle('display', displayValue);
    
    var $textDiv = new Element('div', {
        'class':'mrCodeArea'
    }).inject($codeArea, 'after')
    
    $textDiv.setStyles($textArea.getStyles('width', 'height', 
        'padding', 'margin', 'font-family', 'font-size', 'font-style', 
        'font-variant', 'font-weight', 'line-height', 'white-space', 
        'word-wrap', 'background-color', 
        'border-bottom', 'border-left', 'border-right', 'border-top'));
    $textDiv.setStyle('display', displayValue)
    
    //removing textArea unused styles
    $textArea.setStyle('display', 'block');
    
    /* EVENT HANDLERS*/
    $textArea.addEvent('keydown', function(e){
        if(e.code == 13){
            that.setText($textArea.get('value'));
            this.blur();
            return false;
        }
    });
    
    $textArea.addEvent('blur', function(e){
        $codeArea.setStyle('display', 'none');
        $textDiv.setStyle('display', displayValue);
    });
    
    $textDiv.addEvent('click', function(e){
        
        switch(e.event.detail){
            case 1:
                break;
            case 2:
                that.setEditionMode(true);
                return false;
                break;
        }
    });
    
    this.setText = function(text){
        
        var result = "";
        
        /*Put all this in a separated file*/
        
        //with this method we are going to parse a just strings and symbols not the rules of an entired language.
        
        var rules = [];
        //strings
        rules.push({reg:new RegExp('^"(?:\\\\"|[^"])*"'), type:'string'});
        //spaces
        rules.push({reg:new RegExp('^\\s'), type:'space'});
        //numbers -?[0-9]+(?:.[0-9]+)?
        rules.push({reg:new RegExp('^-?[0-9]+(?:.[0-9]+)?'), type:'number'});
        //symbols
        rules.push({reg:new RegExp('^[\\+\\-\\*\\/=%<>!]+'), type:'symbol'});
        //punctuation 
        rules.push({reg:new RegExp('^[\\[\\]();,:.{}]'), type:'punctuation'});
        //logic
        rules.push({reg:new RegExp('^(?:&{1,2}|\\|{1,2}|~)'), type:'logic'});
        //variables (They have to be defined by the user)
        rules.push({reg:new RegExp('^\\w+'), type:'variable'});
        //everything else
        rules.push({reg:new RegExp('.+'), type:'else'});
        
        while(text.length){
            var i = 0;
            while(i < rules.length && !(token = rules[i].reg.exec(text))){
                i++;
            }
            //add new token
            result += '<span class="token_' + rules[i].type + '">' + token + '</span>';
            //remove token from text
            text = text.slice(token[0].length);
        }
        
        /*Put all this in a separated file*/
        
        
        $textDiv.set('html', result);
    };
    
    this.setEditionMode = function(edit){
        if(edit){
            $textDiv.setStyle('display', 'none');
            $codeArea.setStyle('display', displayValue);
            $textArea.focus();
        }else{
            $textArea.blur();
            $codeArea.setStyle('display', 'none');
            $textDiv.setStyle('display', displayValue);
        }
    }
    
    this.setText($textArea.get('value'));
    this.setEditionMode(false);
};

window.addEvent('domready', function(){
    $$('textarea.mrCodeArea').each(function(h){
        new MrCodeArea(h);
    });
});